<template>
  <div>
    <el-descriptions
      class="margin-top"
      title="事项信息"
      :column="4"
      size="default"
      border
    >
      <!-- 事项名称 -->
      <el-descriptions-item label="事项名称" :span="3">
        XXX事项名称
      </el-descriptions-item>
      <!-- 事项所属单位 -->
      <el-descriptions-item label="事项所属单位">
        深圳市融资担保有限公司
      </el-descriptions-item>

      <!-- 联系人姓名 -->
      <el-descriptions-item label="联系人姓名"> *张三 </el-descriptions-item>
      <!-- 联系人证件类型 -->
      <el-descriptions-item label="联系人证件类型">
        身份证
      </el-descriptions-item>
      <!-- 联系人证件号码 -->
      <el-descriptions-item label="联系人证件号码" :span="2">
        40058219902222222222
      </el-descriptions-item>

      <!-- 联系人电话 -->
      <el-descriptions-item label="联系人电话">
        8888888888
      </el-descriptions-item>
      <!-- 联系人手机 -->
      <el-descriptions-item label="联系人手机">
        *158888888888
      </el-descriptions-item>
      <!-- 联系人邮箱 -->
      <el-descriptions-item label="联系人邮箱" :span="2">
        1168839393@qq.com
      </el-descriptions-item>

      <!-- 备注信息 -->
      <el-descriptions-item label="备注信息" :span="4">
        此处展示备注信息相关文字内容，属于一段长文本，在删格式需要注意
      </el-descriptions-item>
    </el-descriptions>
    <hr />
    <div class="steps-container">
      <!-- 修改步骤条：使用动态状态和自定义图标 -->
      <el-steps :active="active" finish-status="success">
        <el-step :title="item.title" :description="item.description" v-for="(item,index) in steps" :key="index"></el-step>
      </el-steps>
      {{ active }}
      <component :is="componentName"/>
      <div class="button-group">
        <el-button v-if="active > 1" type="primary" @click="prev">上一步</el-button>
        <el-button
          v-if="active < steps.length"
          type="primary"
          @click="next"
        >下一步</el-button>
        <el-button
          v-if="active === steps.length-1"
          type="primary"
          @click="finish"
        >完成</el-button>
      </div>
    </div>
    <hr />
  </div>
</template>

<script>
import Comp1 from "./components/Comp1.vue";
import Comp2 from "./components/Comp2.vue";
import Comp3 from "./components/Comp3.vue";
import Comp4 from "./components/Comp4.vue";
import Comp5 from "./components/Comp5.vue";
import CompFinish from "./components/CompFinish.vue"; // 完成状态的组件
export default {
  name: "AdminPage",
  data() {
    return {
       active: 1,
      steps: [
        {
          title: "新建申请",
          description: ["提交人：XXX", "提交时间：2025年3月12日 9:00"],
          comp: Comp1,
        },
        {
          title: "区里审核材料",
          description: ["审核中", "备注：区里提交上会材料"],
          comp: Comp2,
        },
        {
          title: "处室审批",
          description: ["备注：查看是否需要补充材料"],
          comp: Comp3,
        },
        {
          title: "联合会商",
          description: ["备注：处事上传联合会商材料，批复及函号，走市监审批"],
          comp: Comp4,
        },
        {
          title: "企业上传工商备案材料",
          description: ["备注：如涉及变更，请走重大事项变更"],
          comp: Comp5,
        },
      ],
      isFinished: false, // 完成状态
    };
  },
  computed: {
    componentName() {
      return this.steps[this.active-1].comp;
    }
  },
  methods: {
    next() {
      if (this.active++ > this.steps.length-1) this.active = 1
    },
    pre() {
      if (this.active-- < this.steps.length - 2) this.active = 1
    },
    finish() {
      this.isFinished = true;
    }
  }
};
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
/* 新增图标样式 */
.steps-container :deep(.el-step__icon) {
  width: 32px;
  height: 32px;
  font-size: 16px;
}

/* .steps-container :deep(.is-success) {
  color: white;
  background-color: var(--el-color-success);
  border-radius: 50%;
} */

/* .button-group {
  margin-top: 20px;
  display: flex;
  gap: 12px;
} */
</style>
